<template>
  <div class="main">
    <el-card class="header">
      <el-button type="primary" size="small">导入</el-button>
      <el-button type="primary" size="small">+ 新增员工</el-button>
    </el-card>
    <el-card class="footer">
      <el-table border>
        <el-table-column label="序号" width="160" />
        <el-table-column label="姓名" sortable width="160" />
        <el-table-column label="手机号" sortable width="160" />
        <el-table-column label="工号" sortable width="140" />
        <el-table-column label="聘用形式" sortable width="220" />
        <el-table-column label="部门" sortable width="220" />
        <el-table-column label="入职时间" sortable width="220" />
        <el-table-column label="是否在职" sortable width="150" />
        <el-table-column label="状态" sortable width="180" />
        <el-table-column
          class="handle"
          label="操作"
          width="320px"
          fixed="right"
        >
          <template>
            <div>
              <el-button type="text">查看</el-button>
              <el-button type="text">转正</el-button>
              <el-button type="text">调岗</el-button>
              <el-button type="text">离职</el-button>
              <el-button type="text">角色</el-button>
              <el-button type="text">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          :page-sizes="[1, 6, 10, 20, 100]"
          :current-page="1"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="10"
        />
        <!-- @size-change="handleSizeChange"
          @current-change="handleCurrentChange" -->
      </div>
    </el-card>
    <!-- 新增弹窗 -->
    <DialogItem />
    <!-- 角色管理弹窗 -->
    <RoleDialog />
  </div>
</template>

<script>
import DialogItem from './components/dialog-item.vue'
import RoleDialog from './components/role-dialog.vue'

export default {
  name: 'Employees',
  components: {
    DialogItem,
    RoleDialog
  },
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.main {
  padding: 20px;
  .header {
    margin-bottom: 20px;
    text-align: right;
  }
  ::v-deep .handle {
    text-align: center !important;
  }
  .page {
    padding-top: 20px;
    text-align: right;
  }
  ::v-deep .el-table_1_column_10 {
    text-align: center;
  }
}
</style>
